Change Default Values

Customizing the default values in the Tailwind CSS configuration file to demonstrate how you might improve them for our project:

Customization:

1. purge:

We specify the files to include in the purge process using globs to ensure Tailwind only includes styles that are actually used in our project.

2. darkMode: 

We enable dark mode with the 'class' variant, meaning we'll use a class like dark on the HTML element to activate dark mode styles.

3. colors:

We add two custom colors, primary and secondary, with their respective HEX values.

4. fontFamily: 

We add a custom font stack for the sans-serif font category, using Inter as the primary font.

5. spacing: 

We add a custom spacing value (128) to the spacing scale.

6. screens: 

We add a custom breakpoint (2xl) for extra-large screens.

7. variants: 

We extend the default opacity variant to include a custom variant for disabled elements.

8. plugins: 

We added two plugins in array for forms and typography. 

Example:

// tailwind.config.js
module.exports = {
 mode: 'jit', // Enable Just-in-Time mode
 purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], // Specify files to include in purge process
 darkMode: 'class', // Enable dark mode with 'class' variant
 theme: {
   extend: {
     colors: {
       // Add custom colors
       primary: '#ff6c00',
       secondary: '#1a202c',
     },
     fontFamily: {
       // Add custom fonts
       sans: ['Inter', 'sans-serif'],
     },
     spacing: {
       // Add custom spacing values
       '128': '32rem',
     },
     screens: {
       // Add custom breakpoints
       '2xl': '1536px',
     },
   },
 },
 variants: {
   extend: {
     opacity: ['disabled'], // Add custom opacity variant
   },
 },
 plugins: [
   // additional plugins 
   require('@tailwindcss/forms'),
   require('@tailwindcss/typography'),
 ],
};